import Header from "@/components/Header";
import img from "./img";
import { styled } from "styledfc";
import Main from "@/components/Main";
import Button from "@/components/Button";
import { FormEvent } from "react";
import { useForm } from "react-form-simple";
import { UserInfo } from "@/pages/User";
import { Dialog, Toast } from "react-vant";
import { changeMessage } from "@/api";
import { useNavigate } from "react-router-dom";
export default function index() {
    const navigate = useNavigate();
    const userInfo = JSON.parse(localStorage.getItem("pet-userInfo") as string);
    const { model, render, validate } = useForm<Partial<UserInfo>>({ acc: userInfo.acc, sig: "", password: "", oldPassword: "", nick_name: "" });
    const renerNickname = render("nick_name", {
        label: "昵称",
        rules: { required: "昵称不能为空" },
    })(<input placeholder={userInfo.nick_name} />);
    const renerOldPassword = render("oldPassword", {
        label: "旧密码",
        rules: { required: "旧密码不能为空" },
    })(<input type="password" placeholder="请输入旧密码" />);

    const renerPassword = render("password", {
        label: "新密码",
        rules: { required: "新密码不能为空" },
    })(<input type="password" placeholder="请输入新密码" />);
    const renerSig = render("sig", {
        label: "签名",
    })(<input placeholder="请输入签名" />);
    async function handleSubmit(e: FormEvent<HTMLFormElement>) {
        e.preventDefault();
        e.stopPropagation();
        await validate();
        if (model.password === model.oldPassword) {
            Dialog.alert({
                confirmButtonColor: "#ee0a24",
                message: "新旧密码不能相同",
            });
            return;
        }
        const { code, data } = (await changeMessage(model)) as { code: number; data: string };
        if (code !== 200) {
            Dialog.alert({
                confirmButtonColor: "#ee0a24",
                message: data,
            });
            return;
        } else {
            Toast.success("修改成功");
            userInfo.nick_name = model.nick_name;
            userInfo.sig = model.sig;
            localStorage.setItem("pet-userInfo", JSON.stringify(userInfo));
            navigate("/home");
        }
    }
    return (
        <div className={indexStyle.className}>
            <Header back={true} h2="Modify for" h1="You" img={img.infoHeader} />
            <Main>
                <form className="index__form" onSubmit={handleSubmit}>
                    {renerNickname}
                    {renerOldPassword}
                    {renerPassword}
                    {renerSig}

                    <div className="control">
                        <Button onChange={() => handleSubmit} text="修改信息" />
                    </div>
                </form>
            </Main>
        </div>
    );
}
const indexStyle = styled({
    fontSize: "16rem",
    backgroundColor: "#a1b275",
    ".index__form": {
        height: "calc(100vh - 250rem)",
        width: "100%",
        paddingTop: "30rem",
        "& input": {
            backgroundColor: "transparent",
            border: "none",
            outline: "none",
            marginLeft: "10rem",
        },
        ".react-form-simple-form-item": {
            margin: "0rem",
        },
        ".react-form-simple-error-txt": {
            fontSize: "12rem",
            marginLeft: "10rem",
        },
        ".label-wrap": {
            width: "50rem",
            marginRight: "0rem !important",
        },
        ">div:not(.control)": {
            display: "flex",
            margin: "0 20rem 10rem",
            padding: "20rem 10rem",
            borderBottom: "2rem solid #a1b275",
        },
        ".control": {
            marginTop: "40rem",
        },
    },
});
